<template>
  <div class="allOrderContainer">
    <div>
      <div class="button_aud">
        <el-button
          v-permission="'reportdata_signature_create'"
          type="primary"
          plain
          icon="el-icon-plus"
          data-tracker="P42-1"
          @click="AddSignatureFn"
          style="margin: 0px 10px 10px 0px"
          >创建</el-button
        >
        <el-button
          v-permission="'reportdata_signature_delete'"
          type="primary"
          plain
          icon="el-icon-delete"
          data-tracker="P42-4"
          @click="DeleteSignatureFn"
          style="margin: 0px 10px 10px 0px"
          >删除</el-button
        >
      </div>
      <div class="aud_right">
        <el-pagination
          background
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalListNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData2"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
      stripe
      :max-height="maxheight"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <!-- <el-table-column prop="saas_company_id" label="部门（组织）"></el-table-column> -->
      <el-table-column prop="creator_id" label="创建人"></el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.create_time
              ? new Date(Number(scope.row.create_time) * 1000).toLocaleString()
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="update_time"
        label="修改时间"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.update_time
              ? new Date(Number(scope.row.update_time) * 1000).toLocaleString()
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            v-permission="'reportdata_signature_detail'"
            type="text"
            size="mini"
            data-tracker="P42-2"
            @click="handleDetail(scope.row)"
            >详情</el-button
          >
          <el-button
            v-permission="'reportdata_signature_update'"
            type="text"
            size="mini"
            data-tracker="P42-3"
            @click="handleEditer(scope.row)"
            >修改</el-button
          >
          <el-button
            v-permission="'reportdata_signature_delete'"
            size="mini"
            type="text"
            data-tracker="P42-4"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="创建签章"
      :close-on-click-modal="false"
      :visible.sync="SignaturePopShow"
      width="40%"
      :before-close="handleSignatureClose"
    >
      <el-form
        :model="ruleFormS"
        :rules="rulesS"
        ref="ruleFormS"
        class="demo-ruleForm"
      >
        <div style="width: 100%" class="Signature_pop">
          <el-form-item label="名称" prop="SignatureAddName">
            <el-input v-model="ruleFormS.SignatureAddName"></el-input>
          </el-form-item>
          <!-- <el-form-item label="组织部门" prop="Organization">
              <el-select v-model="ruleFormS.departmentName">
                <el-option
                  v-for="item in originList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item> -->
          <el-form-item label="备注" prop="descrRemark">
            <el-input v-model="ruleFormS.descrRemark"></el-input>
          </el-form-item>
          <el-form-item label="签章上传">
            <!-- <el-upload class="upload-demo" ref="add-upload" action multiple :auto-upload="false" :file-list="ruleFormS.vehicle_picture" :on-change="(file, fileList) => { handleChange(file, fileList, 13) }" :on-remove="(file, fileList) => { removeChange(file, fileList, 13) }">
              <el-button slot="trigger" size="small" icon="el-icon-upload2" style="width:172px">
                签章上传</el-button>
            </el-upload> -->
            <UploadLink
              :limit="1"
              :onExceed="handleExceed"
              :files.sync="ruleFormS.vehicle_picture"
            ></UploadLink>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button data-tracker="P42-6" @click="determineSignatureFn"
          >取 消</el-button
        >
        <el-button data-tracker="P42-5" type="primary" @click="SignatureFn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="编辑签章"
      :close-on-click-modal="false"
      :visible.sync="SignatureEditPopShow"
      width="40%"
      :before-close="handleSignatureEditClose"
    >
      <el-form
        :model="ruleFormEd"
        :rules="rulesEd"
        ref="ruleFormEd"
        class="demo-ruleForm"
      >
        <div style="width: 100%" class="Signature_pop">
          <el-form-item label="名称" prop="SignatureEdName">
            <el-input v-model="ruleFormEd.SignatureEdName"></el-input>
          </el-form-item>
          <!-- <el-form-item label="组织部门" prop="Organization">
              <el-select v-model="ruleFormEd.AuditingEdName">
                <el-option
                  v-for="item in originList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item> -->
          <el-form-item label="备注" prop="descrEdRemark">
            <el-input v-model="ruleFormEd.descrEdRemark"></el-input>
          </el-form-item>
          <el-form-item label="签章上传">
            <!-- <el-upload class="upload-demo" ref="add-upload" action multiple :auto-upload="false" :file-list="ruleFormEd.vehicle_picture" :on-change="(file, fileList) => { handleChange(file, fileList, 13) }" :on-remove="(file, fileList) => { removeChange(file, fileList, 13) }">
              <el-button slot="trigger" size="small" icon="el-icon-upload2" style="width:172px">
                签章上传</el-button>
            </el-upload> -->
            <UploadLink
              :limit="1"
              :onExceed="handleExceed"
              :files.sync="ruleFormEd.vehicle_picture"
            ></UploadLink>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button data-tracker="P42-8" @click="determineSignatureEditFn"
          >取 消</el-button
        >
        <el-button data-tracker="P42-7" type="primary" @click="SignatureEditFn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="签章详情"
      :close-on-click-modal="false"
      :visible.sync="SignatureDetailPopShow"
      width="40%"
      :before-close="handleSignatureDetailClose"
    >
      <el-form
        :model="ruleFormDetail"
        :rules="rulesDetail"
        ref="ruleFormDetail"
        class="demo-ruleForm"
      >
        <div style="width: 100%" class="Signature_pop">
          <el-form-item label="名称" prop="SignatureName">
            <el-input v-model="ruleFormDetail.SignatureName"></el-input>
          </el-form-item>
          <!-- <el-form-item label="部门（组织）" prop="AuditingName">
            <el-select v-model="ruleFormDetail.AuditingName"></el-select>
          </el-form-item> -->
          <el-form-item label="备注" prop="descrEdRemark">
            <el-input v-model="ruleFormDetail.descrEdRemark"></el-input>
          </el-form-item>
          <el-form-item label="签章上传">
            <!-- <el-upload class="upload-demo" ref="add-upload" action multiple :auto-upload="false" :file-list="ruleFormDetail.vehicle_picture" :on-change="(file, fileList) => { handleChange(file, fileList, 13) }" :on-remove="(file, fileList) => { removeChange(file, fileList, 13) }">
              <el-button slot="trigger" size="small" icon="el-icon-upload2" style="width:172px">
                签章上传</el-button>
            </el-upload> -->
            <UploadLink
              :limit="1"
              :onExceed="handleExceed"
              :files.sync="ruleFormDetail.vehicle_picture"
            ></UploadLink>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  signatureList,
  signatureCreateFn,
  DeleteSignature,
  UpdateSignature,
  DetailSignature,
} from "@/api/auditing";
import { uploading, PagewebsiteList } from "../material/common/common";
import UploadLink from "@/components/uploadFile/uploadLink.vue";

export default {
  name: "signaturemanagementList",
  components: { UploadLink },
  data() {
    return {
      maxheight: "auto",
      EditAuditrecordsPopShow: false,
      SignatureEditPopShow: false,
      SignatureDetailPopShow: false,
      DetailPopShow: false,
      SignaturePopShow: false,
      ruleFormS: {
        SignatureAddName: "",
        departmentName: "",
        descrRemark: "",
        vehicle_picture: [],
      },
      rulesS: {},
      ruleFormEd: {
        SignatureEdName: "合同签章",
        AuditingEdName: "北京渡石",
        descrEdRemark: "备注备注",
        vehicle_picture: [],
      },
      rulesEd: {},
      ruleFormDetail: {
        SignatureName: "合同签章",
        AuditingName: "北京渡石",
        descrEdRemark: "",
        vehicle_picture: [],
      },
      rulesDetail: {},
      multipleSelection: [],
      pageNum: 1, //目前在第几页
      totalListNum: 100, //列表总数
      pageSize: 100, //一页多少条
      tableData2: [],
      // 组织管理的字段
      originList: [],
      Dataimage_url: "",
      editerId: "",
    };
  },
  computed: {},
  mounted() {
    this.SignatureListFn(this.pageNum, this.pageSize);
    // 获取组织接口
    this.siteListFn();
  },
  methods: {
    // 组织管理页面
    siteListFn() {
      var sitL = PagewebsiteList("0");
      this.originList = sitL;
    },
    handleExceed(_, fileList) {
      this.$message.warning(`只能选择 ${fileList.length} 个文件上传`);
    },
    // 图片上传功能
    handleChange(file, fileList, type) {
      var filelist = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      uploading(filelist, filename, type).then((res) => {
        this.ruleFormS.vehicle_picture.push({ name: res.res.requestUrls });
        this.Dataimage_url = res.res.requestUrls[0];
      });
    },
    //签章创建函数
    AddSignatureFn() {
      this.SignaturePopShow = true;
    },
    //弹出框关闭函数
    handleSignatureClose() {
      this.SignaturePopShow = false;
    },
    //弹出框取消函数
    determineSignatureFn() {
      this.SignaturePopShow = false;
    },
    //弹出框创建函数
    SignatureFn() {
      if (Object.keys(this.ruleFormS.vehicle_picture).length === 0) {
        this.$message.warning(`请上传签章`);
        return;
      }
      const data = {
        name: this.ruleFormS.SignatureAddName,
        image_url: this.ruleFormS.vehicle_picture[0].url,
        remark: this.ruleFormS.descrRemark,
      };
      signatureCreateFn(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "创建签章成功",
            type: "success",
          });
          this.SignaturePopShow = false;
          this.SignatureListFn(this.pageNum, this.pageSize);
        }
      });
    },
    //批量删除操作函数
    DeleteSignatureFn() {
      if (this.multipleSelection.length > 0) {
        const dataId = {
          ids: this.multipleSelection.map((item) => item.id),
        };
        DeleteSignature(dataId).then((res) => {
          if (res.code === 10000) {
            this.$message({
              message: "删除签章数据成功",
              type: "success",
            });
            this.SignatureListFn(this.pageNum, this.pageSize);
          }
        });
      }
    },
    //详情
    handleDetail(valNum) {
      this.SignatureDetailPopShow = true;
      //详情数据回显
      const data = {
        id: valNum.id,
      };
      DetailSignature(data).then((res) => {
        if (res.code === 10000) {
          this.ruleFormDetail.SignatureName = res.data.name;
          this.ruleFormDetail.AuditingName = res.data.saas_company_id;
          this.ruleFormDetail.descrEdRemark = res.data.remark;
          this.ruleFormDetail.vehicle_picture = [
            { name: res.data.image_url, url: res.data.image_url },
          ];
          // this.ruleFormDetail.vehicle_picture.push({ name: res.data.image_url,url:  res.data.image_url })
        }
      });
    },
    handleSignatureDetailClose() {
      this.SignatureDetailPopShow = false;
    },
    //编辑
    handleEditer(valObj) {
      this.SignatureEditPopShow = true;
      this.editerId = valObj.id;
      const data = {
        id: valObj.id,
      };
      DetailSignature(data).then((res) => {
        if (res.code === 10000) {
          this.ruleFormEd.SignatureEdName = res.data.name;
          this.ruleFormEd.AuditingEdName = res.data.saas_company_id;
          this.ruleFormEd.descrEdRemark = res.data.remark;
          this.ruleFormEd.vehicle_picture = [
            { name: res.data.image_url, url: res.data.image_url },
          ];
          // this.ruleFormEd.vehicle_picture.push({ name: res.data.image_url,url:  res.data.image_url})
        }
      });
    },
    handleSignatureEditClose() {
      this.SignatureEditPopShow = false;
    },
    determineSignatureEditFn() {
      this.SignatureEditPopShow = false;
    },
    //编辑签章 保存函数
    SignatureEditFn() {
      const data = {
        id: this.editerId,
        name: this.ruleFormEd.SignatureEdName,
        image_url: this.Dataimage_url,
        remark: this.ruleFormEd.descrEdRemark,
      };
      UpdateSignature(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "编辑签章成功",
            type: "success",
          });
          this.SignatureEditPopShow = false;
          this.SignatureListFn(this.pageNum, this.pageSize);
        }
      });
    },
    //删除签章管理函数
    handleDelete(val) {
      const idsData = [];
      idsData.push(val.id);
      const dataId = {
        ids: idsData,
      };
      DeleteSignature(dataId).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "删除签章数据成功",
            type: "success",
          });
          this.SignatureListFn(this.pageNum, this.pageSize);
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.SignatureListFn(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.SignatureListFn(this.pageNum, this.pageSize);
    },
    SignatureListFn(pageNumval, pageSizeval) {
      const data = {
        page: pageNumval,
        page_size: pageSizeval,
      };
      signatureList(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.tableData2 = res.data.list;
          if (this.tableData2 && this.tableData2.length > 6) {
            //一排操作栏
            this.maxheight = document.documentElement.clientHeight - 245;
          } else {
            this.maxheight = "auto";
          }
          this.pageNum = res.data.pagination.current_page;
          this.totalListNum = res.data.pagination.total;
          this.pageSize = res.data.pagination.per_page_count;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.Signature_pop .el-form-item__label {
  float: left !important;
  width: 120px !important;
}
/deep/.Signature_pop .el-input {
  width: 65% !important;
}
/deep/.Signature_pop .el-upload__tip {
  padding-left: 120px !important;
}
/deep/.Signature_pop .el-select > .el-input {
  width: 100% !important;
}
.allOrderContainer {
  padding: 10px 15px;
  background-color: #fff;
  .button_aud {
    float: left;
  }
  .aud_right {
    margin: 0px 0px 10px 0px;
    float: right;
  }
}
</style>
